<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8" />
<title>列表标签学习</title>
<style type="text/css">
h1{
  color: red ;
  text-align: center;
}
h6{
  color: green ;
  text-align: left;
}
</style>
</head>

<body>
<h1>无序列表/有序列表/自定义列表</h1>
<hr />
<h6>ul标签-无序标签Demo</h6>
<ul type="disc">
  <li>Apple</li>
  <li>balana</li>
</ul>
<ul type="circle">
  <li>piano</li>
  <li>gname</li>
</ul>
<ul type="square">
  <li>dog</li>
  <li>pig</li>
</ul>

<h6>ul标签-无序标签嵌套列表</h6>
<ul>
  <li>1</li>
  <li>2</li>
    <ul>
      <li>2-1</li>
        <ul>
          <li>2-1-1</li>
          <li>2-1-2</li>
        </ul>
      <li>2-2</li>
    </ul>
  <li>3</li>

</ul>

<hr />
<h6>ol标签-有序标签Demo</h6>
<h4>数字列表：</h4>
<ol>
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>

<h4>字母列表：</h4>
<ol type="A">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>

<h4>小写字母列表：</h4>
<ol type="a">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>

<h4>罗马字母列表：</h4>
<ol type="I">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>

<h4>小写罗马字母列表：</h4>
<ol type="i">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>

<hr />

<h6>dl-dt-dd-标签自定义列表</h6>
<dl> <!--自定义列表-->
<dt>Coffee</dt>    <!--自定义列表项-->
<dd>Black hot drink</dd>   <!--自定义列表项的定义-->

<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

</body>
</html>
